<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="贾文清">
    <title></title>
    <style>
        main {
            width: 600px;
            height: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        nav {
            width: 600px;
            height: 50px;
            background-color: gray;
            display: flex;
            justify-content: space-around;
        }

        nav div {
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: white;
        }

        div section {
            width: 100px;
            border: 1px solid gray;
            text-align: center;
            display: none;
        }

        div section a {
            display: block;
            color: gray;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <main>
        <nav>
            <div>公司简介
                <section>
                    <a href="#">概况介绍</a>
                    <a href="#">发展历史</a>
                    <a href="#">公司实力</a>
                </section>
            </div>
            <div>产品介绍
                <section>
                    <a href="#">公司地址</a>
                    <a href="#">练习方式</a>
                    <a href="#">投资加盟</a>
                </section>
            </div>
            <div>联系我们
                <section>
                    <a href="#">公司地址</a>
                    <a href="#">练习方式</a>
                    <a href="#">投资加盟</a>
                </section>
            </div>
            <div>人才招聘
                <section>
                    <a href="#">Java招聘</a>
                    <a href="#">HTML5招聘</a>
                    <a href="#">PHP招聘</a>
                </section>
            </div>
        </nav>
    </main>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $('div').each(function (index) {
        $('div').eq(index).hover(function () {
            $('div').eq(index).css('color', 'orange').siblings().css('color', 'white');
            $('section').eq(index).css('display', 'block').siblings().css('display', 'none');

        }, function () {
            $('div').eq(index).css('color', 'white');
            $('section').eq(index).css('display', 'none')
           
        })
    });
    $('section').each(function (index) {
            $('section').eq(index).hover(function () {
            $('div').eq(index).css('color', 'white');
            $(this).eq(index).children('a').eq(index).css('text-decoration', 'underline').siblings().css('text-decoration', 'none');
        }, function () { 
            $(this).eq(index).children('a').eq(index).css('text-decoration', 'none');
        })
    });
    $('a').each(function (index) {
            $('a').eq(index).hover(function () {
            $('a').eq(index).css('text-decoration', 'underline').siblings().css('text-decoration', 'none');
        }, function () { 
            $('a').eq(index).css('text-decoration', 'none');
        })
    });

</script>